<template>
	<view>
		<view class="container">
		    <input v-model="inputValue" class="input" placeholder="请输入关键字" />
		    <button @click="search" class="button">搜索</button>
		  </view>
	<view class="main">
	 <u-collapse
	    @change="change"
	    @close="close"
	    @open="open"
		border="false"
	  >
	    <u-collapse-item
	      title="敏货"
	      name="Docs guide"
	    >
	    <view class="box">
			<view>
				<image src="../../static/images/banner/1.jpg"></image>
			</view>
			<view class="text">
				<h2>眼药水</h2>
				<h3>敏货</h3>
				<h2>商品内含液体</h2>
			</view>
		</view> 
		<view class="box">
			<view>
				<image src="../../static/images/banner/1.jpg"></image>
			</view>
			<view class="text">
				<h2>眼药水</h2>
				<h3>敏货</h3>
				<h2>商品内含液体</h2>
			</view>
		</view> 
	    </u-collapse-item>
		<u-collapse-item
		  title="禁运"
		  name="Docs guide"
		> 
		<view class="box">
			<view>
				<image src="../../static/images/banner/1.jpg"></image>
			</view>
			<view class="text">
				<h2>眼药水</h2>
				<h3>禁运</h3>
				<h2>商品内含液体</h2>
			</view>
		</view> 
		</u-collapse-item>
	 </u-collapse>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue: "",
			}
		},
		methods: {
			search(e) {
			      // 在这里处理查询逻辑，例如调用后端接口获取包裹信息
			      console.log("查询单号：", this.inputValue);
			    },
			open(e) {
			              // console.log('open', e)
			            },
			            close(e) {
			              // console.log('close', e)
			            },
			            change(e) {
			              // console.log('change', e)
			            }
		}
	}
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.input {
  width: 90%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius:30px;
  padding: 0 10px;
  margin-top: 10px;
  margin-bottom:10px;
  position: relative;
}

.button {
  width: 20%;
  height: 40px;
  background-color: #E99D42;
  color: #fff;
  border-radius:30px;
  text-align: center;
  line-height: 40px;
  position: absolute;
  right:20px;
  top:10px;
}
.main{
	padding-top: 5px;
}
.box{
	height: 90px;
	display: flex;
	margin-bottom: 10px;
}
.box image{
	width: 100px;
	height: 90px;
}
.text{
	margin-left: 20rpx;
}
.text h2{
	font-size: 14px;
}
.text h3{
	width: 40px;
	font-size: 14px;
	background-color:#E99D42;
	border-radius: 30px;
	margin: 30rpx 0;
	padding: 10rpx;
}
</style>
